/*
 * @Author: 
 * @Date: 2022-02-16 15:20:21
 * @LastEditors: lqj
 * @LastEditTime: 2022-02-16 15:50:08
 * @Description: 请填写简介
 */
import React, { Component } from 'react';

const DataSourceList = [

]

function WrappedComponent (props) {
  return (
    <>
      {
        props.data.map(it => {
          return (<p key={it.id}>{it.title}</p>)
        })
      }
    </>
  )
}

function withSubscription(WrappedComponent, selectData) {
  return class extends Component {
    DataSource = React.createRef()
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        data: selectData(props)
      };
    }

    componentDidMount() {
      // ...负责订阅相关的操作...
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange);
    }

    handleChange() {
      this.setState({
        data: selectData(this.props)
      });
    }
    render() {
      return (
        <>
          <select ref={this.DataSource}>
            <option value={1}>jack</option>
            <option value={2}>tom</option>
            <option value={3}>daWei</option>
          </select>
          <WrappedComponent data={this.state.data} {...this.props} />
        </>
      );
    }
  }
}

const CommentListWithSubscription = withSubscription(
  WrappedComponent,
  (DataSource) => DataSourceList
);

export default CommentListWithSubscription
